<template>
	<om-page :title="pageTitle">
		<view class="desc-chart om-btn-color">
			<uni-search-bar
			bgColorCls="bg-steelblue" 
			cancelColor="text-white"
			 :focus="true" 
			 placeholder="请输入关键字" 
			 @confirm="confirm"></uni-search-bar>
		</view>
		<view class="nodata" v-show="dataList.length == 0 && dataStatus">{{ '暂无数据！' }}</view>
		<view class="page__bd" style="margin-top: 51px;">
			<uni-list>
				<view v-for="(item, index) in dataList" :key="index" class="item" style="display: flex;">
					<view style="flex:auto">
						<uni-list-item
							:title="item.priceListName"
							:avatar="index + 1"
							:avatarBgColor="calcBgColor(item)"
							:showArrow="false"
						>
						<view slot="note">
							<view>版本号：<text class="">{{item.versionNumber}}</text></view>
						</view>
						</uni-list-item>
					</view>
					<view class="rbtn"><a class='radius light bg-blue zbbtn' @click.stop="getoLink(item)">查看</a></view>
				</view>
			</uni-list>
		</view>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
		<uni-popup id="popups" ref="popups" :type="'center'">
			<view class="popup-cotent padding">
				<view class="margin popup-tip">
					请选择附件
				</view>
				<view style="max-height: 600px;overflow: auto;">
					<view class="popup-item padding" v-for="(item, index) in fileList" :key="index" @click="getoLinks(item)">
					<text class="popup-texts">{{ item.fileName }}</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				</view>
				<view class="margin flex justify-end">
					<a class="cancel-btn" @click="cancels">取消</a>
				</view>
			</view>
		</uni-popup>
	</om-page>
</template>

<script>
	import { ignoreHtml } from '@/static/js/common.js';
	export default {
		data() {
			return {
				dataStatus: false,
				pageTotal: 1,
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
				pageTitle:"PDF价格表",
				dataList: [],
				keyword: '',
				fileList: [],
			};
		},
		provide() {
			return {
				searchKey: this
			}
		},
		methods: {
			confirm(e){
				let _that = this
				if (e.value) {
				  if (!_that.keyword || (_that.keyword && _that.keyword != e.value.trim())) {
					_that.keyword = e.value.trim()
					_that.searchList()
				  }
				} else {
				  _that.keyword = ''
				  _that.searchList()
				}
			},
			calcBgColor(item) {
				return this.ColorList[3].name
			},
			getoLink(item){
				let _that = this;
				if(!item.multiFile && item.fileName && item.fileName.endsWith("pdf")){
					uni.navigateTo({
						url: "/pages/public/pdf-preview/pdf-preview?busCode=FIN1926&fileId=" + item.id + "&simpleClazzName=&pdfFileUrl=" + item.fileUrl
					})
				}else if(item.fileUrl && item.fileName){
					uni.navigateTo({
						url: "/pages/public/filetable/filetable?fileUrl=" + encodeURIComponent(item.fileUrl)
					})
				}else{
					_that.om.request("uploadFileData/findFileList",{
						mainFormId: item.id,
						key: '162'
					},'post').then(res=>{
						_that.fileList = res;
						if(_that.fileList.length > 1){
							_that.$refs.popups.open()
						}else if(_that.fileList.length == 1){
							_that.getoLinks(_that.fileList[0])
						}else{
							_that.om.toast('当前PDF价格表没有上传文件')
						}
					})
				}
			},
			getoLinks(item){
				let _that = this;
				if(!item.multiFile && item.fileName && item.fileName.endsWith("pdf")){
					uni.navigateTo({
						url: "/pages/public/pdf-preview/pdf-preview?fileId=" + item.id + "&simpleClazzName=&pdfFileUrl=" + item.fileSaveName+'&fileUplaodKey='+item.filePathKey
					})
				}else{
					uni.navigateTo({
						url: "/pages/public/filetable/filetable?fileUrl=" + encodeURIComponent(item.fileSaveName)
					})
				}
			},
			cancels(){
				this.$refs.popups.close()
			},
			searchList(){
				let _that = this;				
				_that.pageNum = 1
				_that.dataList = []
				_that.dataStatus = false
				_that.getDataList()
			},
			getDataList(){
				let _that = this;
				let obj = {
					q: _that.keyword,
					page: _that.pageNum,
					rows: _that.pageSize
				}
				_that.om.request("pdfSalesPriceList/getDataGrid",obj).then(res=>{
					_that.dataList = _that.dataList.concat(res.rows)
					_that.dataStatus = true
					_that.pageTotal = res.totalPage
				})
			},
		},
		onLoad(data) {
			let _that = this;
			
			uni.setNavigationBarTitle({
				title: 'PDF价格表'
			});
			
			_that.getDataList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			let _that = this;
			if(_that.pageTotal>_that.pageNum){
				_that.pageNum++
				_that.getDataList()
			}
		}
	};
</script>

<style>
	.desc-chart{
		position: fixed;
		top: 0;
		/* line-height: 50px;
		padding: 0 15px; */
		font-size: 14px;
		border-bottom: #EEEEEE 1px solid;
		/* display: flex; */
		z-index: 99;
		width: 100%;
	}
	.allchart{
		width: 100%;
	}
	.allchart a{
		float: right;
		display: block;
		width: 68px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		display: block;
		color: #000;
		background-color: #fff;
		margin: 12px 15px 12px 4px;
	}
	.descFilter{
		flex:1;
	}
	.descFilter .keyword{
		float: left;
		height: 26px;
		line-height: 26px;
		border: #EEEEEE 1px solid;
		border-right: 0;
		margin: 12px 0;
		width: 150px;
		padding: 0 5px;
		font-size: 12px;
	}
	.descFilter .btn{
		float: left;
		display: block;
		width: 40px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		margin: 12px 0;
	}
	.zbbtn{
		text-align: center;
		width: 64px;
		height: 32px;
		line-height: 32px;
		font-size: 12px;
		display: block;
	}
	.rbtn{
		position: relative;
		flex:none;
		padding: 12px 15px 0 0;
		border-bottom: 1px solid #EEEEEE;
	}
	.nodata{
		width: calc(100% - 30px);
		margin: 72px 15px 0;
		height: 26px;
		line-height: 26px;
		background: none;
		text-align: center;
	}
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		/* text-align: center; */
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		text-align: left;
	}
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-tip{
		font-size: 16px;
		color:#b0b0b0 ;
	}
	.cancel-btn{
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		height: 36px;
		line-height: 36px;
		width: 72px;
		margin: 15px auto 0;
	}
	.popup-text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 80px;
	}
	.popup-texts{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 280px;
	}
	.popup-select{
		border: 0;
		width: 150px;
		height: 19px;
		line-height: 19px;
		background: none;
		appearance: none;
		text-align: right;
		text-align-last: right;
		font-size: 16px;
	}
	.popup-input{
		text-align: right;
	}
	.showUserPopup{
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		z-index: 9998;
		background: #FFF;
		height: 100%;
	}
	
	.showUserPopup .bar{
		background-color: #fff;
		height: 36px;
		padding-left: 10px;
		padding-right: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-bottom-width: 0.5px !important;
		border-bottom-style: solid;
		border-bottom-color: #f5f5f5;
		font-size: 16px;
		color: #757575;
		line-height: 1;
	}
</style>                                                  
